<template>
<Modal id="substationDetail" ref="substationDetail" v-model="modSta" title="详情">
    当前选择的站点ID是：{{detailId}}
    <Divider orientation="left">详情列表</Divider>
    <ul>
        <li v-for="(value,key) in list">
            {{key}} : {{value}}
        </li>
    </ul>
    <Divider orientation="left">可修改参数</Divider>
    <Input v-model="list.short" placeholder="简称"><span slot="prepend">简称</span></Input>
    <Input v-model="list.full" placeholder="全称"><span slot="prepend">全称</span></Input>
    <Input v-model="list.adress" placeholder="详细地址"><span slot="prepend">详细地址</span></Input>
    <Input v-model="list.responsor" placeholder="联系人"><span slot="prepend">联系人</span></Input>
    <Input v-model="list.phone" placeholder="联系人电话"><span slot="prepend">联系人电话</span></Input>
    <Input v-model="list.mail" placeholder="联系人电子邮件"><span slot="prepend">联系人电子邮件</span></Input>
    <Select v-model="list.voltage" placeholder="电压等级">
        <Option value="500">500</Option>
        <Option value="220">220</Option>
        <Option value="110">110</Option>
        <Option value="35">35</Option>
        <Option value="0">0</Option>
    </Select>
    <Input v-model="list.owner" placeholder="产权单位"><span slot="prepend">产权单位</span></Input>
    <Input v-model="list.maintainer" placeholder="运维单位"><span slot="prepend">运维单位</span></Input>
    <Select v-model="list.grade" placeholder="调度等级">
        <Option value="0">一级网</Option>
        <Option value="1">二级网</Option>
        <Option value="2">三级网</Option>
        <Option value="3">四级网</Option>
        <Option value="4">五级网</Option>
    </Select>
    <Input v-model="list.longitude" placeholder="经度"><span slot="prepend">经度</span></Input>
    <Input v-model="list.latitude" placeholder="纬度"><span slot="prepend">纬度</span></Input>
    <XSwitch v-model="list.status" true-value="0" false-value="1"><span slot="prepend">状态</span></XSwitch>
    <Select v-model="list.type" placeholder="类型">
        <Option value="变电站">变电站</Option>
        <Option value="电厂">电厂</Option>
        <Option value="用户变">用户变</Option>
    </Select>
    <Card>
        <p slot="title">当前变电站关联的监测设备</p>
        <div v-for="(dev, index) in list.devs" :key="index">
            第{{index+1}}个检测设备是：
            <p>device_name是:{{ dev.device_name }}</p>
            <p>device_id是:{{ dev.device_id }}</p>
        </div>
    </Card>
    <!-- 提交测试按钮 -->
    <Button type="primary" @click.native="edit">提交</Button>
</Modal>
</template>
<script>
import Vue from 'vue';
import {
    Modal,
    Row,
    Col,
    Divider,
    Form,
    FormItem,
    Input,
    Button,
    Select,
    Option,
    Switch,
    Card,
    Message
} from 'iview'
Vue.prototype.$Modal = Modal;
Vue.prototype.$Message = Message;
import {
    mapState,
    mapMutations
} from 'vuex'
export default {
    name: 'SubstationDetail',
    props: {
        detailModSta: {
            type: Boolean,
            required: true
        }, //模态框状态
        detailId: {
            type: String,
            required: true
        }, //详情id
    },
    data() {
        return {
            modSta: this.detailModSta, //模态框状态
            list: {}, //详情列表
            wlanstacompVal: '', //接入设备、通信设备厂商
        };
    },
    created() {},
    mounted() {},
    computed: {},
    methods: {
        //编辑
        edit() {
            let obj = this.list;
            this.$axios.post('/substation/edit', obj).then((res) => {
                if (res.data) {
                    this.$Message.success('修改成功')
                } else {
                    this.$Message.error('修改失败')
                }
            })
        }
    },
    watch: {
        detailModSta(newVal, oldVal) {
            let _self = this;
            this.modSta = newVal;
            //获取详情列表
            let obj = {
                id: this.detailId
            };
            this.$axios.post('/substation/detail', obj).then(res => {
                _self.list = res.data;
            });
        }, //父组件值改变修改子组件值
        modSta(newVal, oldVal) {
            this.$emit('updateModSta', newVal);
        }, //子组件值改变提交给父组件
    },
    components: {
        Modal,
        Row,
        Col,
        Divider,
        Form,
        FormItem,
        Input,
        Button,
        Select,
        Option,
        XSwitch: Switch,
        Card,
        Message
    }
}
</script>
